<template>
	<view class="container">
		<block>
			<!-- 有封面图 -->
			<view
				class="userinfo"
				v-if="LoginUser"
				:style="{ background: 'url(' + LoginUser.cover + ')' }"
			>
				<!-- #ifdef MP-WEIXIN -->

				<!-- 头像 -->
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>

				<!-- 昵称 -->
				<view class="nickname-carid">
					<open-data class="userinfo-nickname" type="userNickName"></open-data>
				</view>

				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="AuthLogin">授权登录</u-button>
				</view>
				<!-- #endif -->

				<!-- #ifdef H5 || APP-PLUS -->
				<view class="avatar">
					<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				</view>

				<view class="nickname-carid">
					<text class="userinfo-nickname" v-if="LoginUser.nickname">{{ LoginUser.nickname }}</text>
					<text class="userinfo-nickname" v-else>临时用户</text>
				</view>

				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="Login()">用户登录</u-button>
				</view>
				<!-- #endif -->
			</view>

			<!-- 没有封面图 -->
			<view class="userinfo" v-else>
				<!-- 微信小程序 -->
				<!-- #ifdef MP-WEIXIN -->

				<!-- 头像 -->
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>

				<!-- 昵称 -->
				<view class="nickname-carid">
					<open-data class="userinfo-nickname" type="userNickName"></open-data>
				</view>

				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="AuthLogin">授权登录</u-button>
				</view>
				<!-- #endif -->

				<!-- H5和APP端 -->
				<!-- #ifdef H5 || APP-PLUS -->
				<view class="avatar">
					<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				</view>

				<view class="nickname-carid">
					<text class="userinfo-nickname" v-if="LoginUser">{{ LoginUser.nickname }}</text>
					<text class="userinfo-nickname">临时用户</text>
				</view>

				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="Login()">用户登录</u-button>
				</view>
				<!-- #endif -->
			</view>

			<!-- 用户菜单 -->
			<!-- 已经登陆 -->
			<view class="usermotto" v-if="LoginUser">
				<navigator class="profile-items" url="/pages/user/profile">
					<text>基本资料</text>
					<image src="/static/images/icons/row.png"></image>
				</navigator>
				<navigator class="profile-items" url="/pages/user/address/index">
					<text>收货地址</text>
					<image src="/static/images/icons/row.png"></image>
				</navigator>
				<navigator class="profile-items" url="/pages/project/index">
					<text>我的预约</text>
					<image src="/static/images/icons/row.png"></image>
				</navigator>
				<navigator class="profile-items" url="/pages/test/test?">
					<text>消费记录</text>
					<image src="/static/images/icons/row.png"></image>
				</navigator>
				<view class="profile-items" @click="callphone">
					<text>联系客服</text>
					<image src="/static/images/icons/row.png"></image>
				</view>
			</view>

			<!-- 没有登录要提醒 -->
			<view class="usermotto" v-else>
				<view class="profile-items" @click="ToLogin">
					<text>基本资料</text>
					<image src="/static/images/icons/row.png"></image>
				</view>
				<view class="profile-items" @click="ToLogin">
					<text>收货地址</text>
					<image src="/static/images/icons/row.png"></image>
				</view>
				<view class="profile-items" @click="ToLogin">
					<text>我的预约</text>
					<image src="/static/images/icons/row.png"></image>
				</view>
				<view class="profile-items" @click="ToLogin">
					<text>消费记录</text>
					<image src="/static/images/icons/row.png"></image>
				</view>
				<view class="profile-items" @click="callphone">
					<text>联系客服</text>
					<image src="/static/images/icons/row.png"></image>
				</view>
			</view>
		</block>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LoginUser: null,
				ModalShow: false,
			};
		},
		onShow() {
			this.LoginUser = uni.getStorageSync('LoginUser');
		},
		methods: {
			AuthLogin() {
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						let code = res.code ? res.code : '';

						if (!code) {
							this.$refs.uToast.show({
								type: 'error',
								message: '临时登录凭证获取失败',
							});

							return false;
						}
						// 调用后台登陆接口
						let result = await this.$u.api.user.login({
							code: code,
						});

						if (result.code == 0) {
							//授权失败提醒
							this.$refs.uToast.show({
								message: result.msg,
								type: 'error',
							});

							return false;
						}

						//授权成功但是没有关联系统账号
						if (!result.data || JSON.stringify(result.data) == '{}') {
							this.$refs.uToast.show({
								message: '没有绑定帐号，请先绑定',
								type: 'error',
								complete() {
									//保留当前界面跳转到下一个界面最多20层
									uni.navigateTo({
										url: result.url,
									});
								},
							});
							return false;
						}

						//保存到缓存(本地存储)
						uni.setStorageSync('LoginUser', result.data);

						//关闭所有界面，强制跳转
						uni.reLaunch({
							url: '/pages/user/index',
						});
					},
				});
			},
			ToLogin() {
				this.$refs.uToast.show({
					type: 'error',
					message: '请先登录',
				});
			},
			callphone() {
				uni.makePhoneCall({
					phoneNumber: '13543589755', //仅为示例
				});
			},
			async Login() {
				let data = {
					email: '123@qq.com',
					password: 'root',
				};

				let result = await this.$u.api.user.userlogin(data);
			},
		},
	};
</script>

<style>
	.login {
		margin: 400rpx;
	}

	.userinfo {
		width: 100%;
		padding: 40rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
		color: white;
	}

	.userinfo-avatar {
		width: 200rpx;
		height: 200rpx;
		margin: 30rpx;
		border-radius: 50%;
	}

	.nickname-carid,
	.userinfo-carid {
		font-size: 36rpx;
		margin: 10rpx 0;
	}

	.userinfo-carid {
		padding-bottom: 5rpx;
		font-size: 26rpx;
	}

	.usermotto {
		width: 100%;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.profile-items {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: auto;
		width: auto;
		padding: 20rpx 50rpx;
		border-bottom: 20rpx solid rgb(234, 234, 234);
		font-size: 26rpx;
		box-shadow: 0 0 10px #ddd;
	}

	.profile-items image {
		height: 36rpx;
		width: 36rpx;
	}

	.userinfo .avatar {
		display: block;
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		overflow: hidden;
	}
</style>
